html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
figure,
figcation {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: "微软雅黑";
    vertical-align: baseline;
}

input {
    -webkit-input-appearance: none;
    /*去除input默认样式*/
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

body {
    background-color: #242536;
}

.absolute {
    position: absolute;
}

.lf {
    float: left;
}

.lr {
    float: right;
}

.cl {
    clear: both;
    overflow: hidden;
}

//margin
.margin-bottom24 {
    margin-bottom: 24px;
}

.margin-bottom30 {
    margin-bottom: 30px;
}

.margin-bottom38 {
    margin-bottom: 38px;
}

.margin-left24 {
    margin-left: 24px;
}

.margin-right8 {
    margin-right: 8px;
}

.margin-right14 {
    margin-right: 14px;
}

.margin-right18 {
    margin-right: 14px;
}

.margin-right24 {
    margin-right: 24px;
}

.margin-top110 {
    margin: 0 auto;
}

.margin-top24 {
    margin-top: 24px;
}

.padding-top18 {
    padding-top: 18px;
}

.padding-top22 {
    padding-top: 22px
}

.padding-top26 {
    padding-top: 26px
}

.margin-top96 {
    margin-top: 96px;
}

.padding-bottom24 {
    padding-bottom: 24px;
}

.padding-top100 {
    padding-top: 100px;
}

.padding-bottom26 {
    padding-bottom: 26px;
}

.padding-bottom34 {
    padding-bottom: 34px;
}

.padding10 {
    padding: 0 10px;
}

.padding-right10 {
    padding-right: 10px;
}

.padding-right22 {
    padding-right: 22px;
}

.padding-left44 {
    padding-left: 44px;
}

.padding-left28 {
    padding-left: 28px;
}

//height
.height180 {
    height: 180px;
}

.height252 {
    height: 282px;
}

.height300 {
    height: 300px;
}

.height312 {
    height: 312px;
}

.height325 {
    height: 325px;
}

.height350 {
    height: 350px;
}

.height358 {
    height: 358px;
}

.height375 {
    height: 375px;
}

.height390 {
    height: 390px;
}

.height400 {
    height: 400px;
}

.height410 {
    height: 410px;
}

.height404 {
    height: 404px;
}

.height426 {
    height: 426px;
}

.height526 {
    height: 526px;
}

.height444 {
    height: 444px;
}

.height606 {
    height: 606px;
}

.height734 {
    height: 734px;
}

.height891 {
    height: 891px;
}

.height952 {
    height: 952px;
}

//background
.backgroundfff {
    background: rgba(255, 255, 255, 0.08);
}

//border
.border {
    border: 3px solid transparent;
    border-image: url(../img/border.png) 3 stretch;
}

.col-md-2,
.col-md-7,
.col-md-3,
.col-md-9 {
    padding: 0;
}

body {
    background-color: #242536;
}

//margin
.margin-bottom20 {
    margin-bottom: 20px;
}

.margin-bottom24 {
    margin-bottom: 24px;
}

.margin-bottom28 {
    margin-bottom: 28px;
}

.margin-left24 {
    margin-left: 24px;
}

.margin-right20 {
    margin-right: 20px;
}

.margin-right12 {
    margin-right: 12px;
}

.margin-right24 {
    margin-right: 24px;
}

.margin-top24 {
    margin-top: 24px;
}

.margin-top96 {
    margin-top: 96px;
}

.margin-left12 {
    margin-left: 12px;
}

.padding10 {
    padding: 0 10px;
}

.padding-right22 {
    padding-right: 22px;
}

.padding-left29 {
    padding-left: 29px
}

.padding-top22 {
    padding-top: 22px
}

.padding-left44 {
    padding-left: 44px;
}

//height
.height216 {
    height: 216px;
}

.height360 {
    height: 360px;
}

.height358 {
    height: 358px;
}

.height407 {
    height: 407px;
}

.height410 {
    height: 410px;
}

.height404 {
    height: 404px;
}

.height444 {
    height: 444px;
}

.height416 {
    height: 416px;
}

.height460 {
    height: 460px;
}

.height526 {
    height: 526px;
}

.height540 {
    height: 540px;
}

//background
.backgroundfff {
    background: rgba(255, 255, 255, 0.08);
}

//border
.border {
    border: 3px solid transparent;
    border-image: url(../img/border.png) 3 stretch;
}

.col-md-2,
.col-md-7,
.col-md-3,
.col-md-9 {
    padding: 0;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

body {
    background: url(../img/bg.png);
    background-size: 100%;
}

.flex {
    display: flex;
    width: 100%;
    list-style: none;
}

.guding {
    width: 100%;
    .navbar {
        background: url(../img/navbar_bg.png)no-repeat;
        height: 72px;
        background-size: 100%;
        border-radius: 0px;
        border: none;
        .navbar-brand {
            display: inline-block;
            color: #fff;
            padding-left: 40px;
            font: 28px/38px "微软雅黑";
        }
        .navbar-right {
            height: 72px;
            padding-top: 20px;
            li {
                position: relative;
                >a {
                    color: #fff;
                    width: 156px;
                    padding: 15px;
                    font-size: 18px;
                    text-align: center;
                    font-weight: 600;
                }
                .active {
                    background: url(../img/选中状态.png)no-repeat;
                }
            }
            li:hover {
                .sub-nav {
                    display: block;
                }
            }
            .sub-nav {
                position: absolute;
                top: 48px;
                left: -46px;
                z-index: 99;
                text-align: center;
                padding-top: 20px;
                display: none;
                &-item {
                    display: block;
                    width: 244px;
                    height: 50px;
                    font-weight: 400;
                    font-size: 20px;
                    line-height: 50px;
                    color: #fff;
                    padding: 0;
                    background: #10526c;
                    &.active {
                        background: #0C7489;
                    }
                    &:hover {
                        background: #0C7489;
                    }
                }
            }
        }
    }
}

.content {
    width: 100%;
    padding: 0 40px;
}

.title {
    font: 18px "微软雅黑";
    padding: 20px 0 20px 44px;
    color: #00ffff;
}

.btnbox {
    display: inline-block;
    font-size: 14px;
    color: #DBDAEA;
    input {
        width: 88px;
        height: 28px;
        background: rgba(3, 206, 249, 0.30);
        border: 1px solid #03CEF9;
        border-radius: 3px;
        color: #DBDAEA;
        text-align: center;
    }
}

.title-b {
    font-size: 18px;
    color: #00FFFF;
    letter-spacing: 0;
}

.inputstyle {
    background: rgba(3, 206, 249, 0.10);
    border: 1px solid rgba(3, 206, 249, 0.20);
    border-radius: 2px;
    font-size: 14px;
    color: rgba(9, 144, 179, 0.65);
}

.inputstyle:hover {
    background: rgba(1, 29, 51, 0.3);
    border: 1px solid rgb(3, 206, 249);
    color: #03caf6
}

.inputstyle:active {
    background: rgba(2, 68, 95, 0.1);
    color: #03caf6
}

.input-active {
    background: rgba(3, 206, 249, 0.30);
    font-size: 14px;
    color: #03CEF9;
}

input::-webkit-input-placeholder {
    /* WebKit browsers*/
    font-size: 14px;
    color: #DBDAEA;
}

input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18*/
    font-size: 14px;
    color: #DBDAEA;
}

input::-moz-placeholder {
    /* Mozilla Firefox 19+*/
    font-size: 14px;
    color: #DBDAEA;
}

input:-ms-input-placeholder {
    /* Internet Explorer 10+*/
    font-size: 14px;
    color: #DBDAEA;
}

.title-b {
    font-size: 18px;
    color: #00FFFF;
    letter-spacing: 0;
}

.section-button {
    display: inline-block;
    vertical-align: top;
    min-width: 60px;
    height: 28px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 26px;
    color: #03CEF9;
    text-align: center;
    background: rgba(3, 206, 249, 0.10);
    border: 1px solid rgba(3, 206, 249, 0.20);
    border-radius: 2px;
    opacity: 0.65;
    cursor: pointer;
    &:hover {
        opacity: 1;
        color: #03CEF9;
    }
    &.active,
    &.active:hover {
        background: rgba(3, 206, 249, 0.30);
        border: 1px solid #03CEF9;
        opacity: 1;
    }
}

.buttons-group {
    font-size: 0;
    .section-button {
        margin-right: 10px;
        &:last-child {
            margin-right: 0;
        }
    }
}

.pos-relative {
    position: relative;
}

.height300 {
    height: 300px;
}

.button-style {
    display: inline-block;
    width: 159px;
    height: 48px;
    font-size: 18px;
    color: #00FFFF;
    line-height: 48px;
    letter-spacing: 0;
    text-align: center;
    background: rgba(3, 206, 249, 0.10);
    border: 1px solid rgba(3, 206, 249, 0.20);
}

.button-style:hover {
    background: rgba(3, 206, 249, 0.30);
}

.button-active {
    background: rgba(3, 206, 249, 0.30);
}

.g-nav2 {
    position: fixed;
    z-index: 9999;
    top: 80px;
    width: 100%;
    right: 0;
    background: #132f45 !important;
    height: 75px;
    padding: 0;
    box-shadow: 5px 2px 26px #000;
    margin: 0;
    display: none;
    li {
        float: right;
        a {
            color: #dbdaea;
            width: 156px;
            padding: 15px;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
            font-weight: 600;
        }
        .active2,
        a:hover {
            background: none;
            color: #00ffff;
            border-bottom: 2px solid #00ffff;
        }
    }
}

.dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -190px;
    z-index: 1002;
    width: 380px;
    height: 380px;
    background: #0F526D;
    border: 1px solid rgba(0, 255, 255, 0.3);
    &-title {
        margin-top: 24px;
        font-size: 20px;
        color: #00FFFF;
        text-align: left;
        padding-left: 30px;
    }
    &-close-button {
        position: absolute;
        top: 18px;
        right: 16px;
        width: 28px;
        height: 28px;
        background: rgba(0,255,255,0.50) url('../img/close icon.png') center no-repeat;
        background-size: 11px;
        border-radius: 3px;
        opacity: .4;
        cursor: pointer;

        &:hover {
            opacity: .8;
        }
    }
}

.mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}
.error {
  color: #F54336;
}

.success {
  color: #37C936;
}
.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    color: #A3AED9;

    &__total-number {
        margin-right: 4px;
        font-size: 14px;
        color: #A3AED9;
    }
    &__page-list {
        display: inline-flex;
        align-items: center;
    }

    &__page-button {
        margin: 0 2px;
        width: 28px;
        height: 28px;
        background: rgba(3,206,249,0.10);
        border: 1px solid rgba(3,206,249,0.20);
        font-size: 13px;
        text-align: center;
        line-height: 26px;
        cursor: pointer;

        &:hover,
        &:active {
            background: rgba(3,206,249,0.28);
            border: 1px solid #03CEF9;
            color: #fff;
        }

        &.shenglue {
            line-height: 18px;
            border: none;
            background: none;
        }

        &.prev,
        &.next {
            margin: 0 10px;
            i {
                margin: 7px auto;
                display: block;
                width: 6px;
                height: 12px;
                background: url('../img/arrow-left.png') no-repeat;
            }
        }
        &.next {
            i {
                transform: rotate(180deg);
            }
        }
    }
    &__step-num {
        display: flex;
        align-items: center;
        margin: 0 10px;
        > input {
            margin: 0 5px;
            width: 34px;
            height: 28px;
            text-align: center;
            background: rgba(3,206,249,0.10);
            border: 1px solid rgba(3,206,249,0.20);
            border-radius: 2px;
        }
    }
    .go-button {
        margin-left: 20px;
        width: 40px;
    }
}